<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选或全不选</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

    <script>
        $(function () {
            //获取数据行的奇数行的tr，设置背景色为pink
            $("tr:gt(1):odd").css("backgroundColor", "pink");

            //获取数据行的偶数行的tr,设置背景色为green
            $("tr:gt(1):even").css("backgroundColor","green");
        });

        //分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可
        function selectAll(obj) {
            //获取下边的复选框
            $(".select").prop("checked",obj.checked);
        }
    </script>
</head>
<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <td colspan="5"><input type="button" value="删除"></td>
        </tr>

        <tr style="background-color: #af3208;">
            <th><input type="checkbox" onclick="selectAll(this)" ></th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>

        <tr>
            <td><input type="checkbox" class="select"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td>
                <a href="">修改</a>
                <a href="">删除</a>
            </td>
        </tr>

        <tr>
            <td><input type="checkbox" class="select"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td>
                <a href="">修改</a>
                <a href="">删除</a>
            </td>
        </tr>

        <tr>
            <td><input type="checkbox" class="select"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td>
                <a href="">修改</a>
                <a href="">删除</a>
            </td>
        </tr>

        <tr>
            <td><input type="checkbox" class="select"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td>
                <a href="">修改</a>
                <a href="">删除</a>
            </td>
        </tr>

    </table>
</body>
</html>